<!-- <div [@flyIn]="'active'"> -->
<div class="m-l nav navbar-nav m-t block">
	<span>
		<a class="btn btn-xs btn-gray" [routerLink]="['../../']"><i class="fa fa-undo">返回</i></a>
	</span>
	<span> 产品管理 ></span>
	<span> 设备管理 ></span>
	<span> 设备详情</span>       
</div>
<div class="m-t-lg">
  <div class="wrapper-sm">
	<div class="panel panel-default">
		<div class="panel-body">
			<div class="row m-t-n-lg">
				<div class="col-md-6">
					<!-- <div class="panel panel-default" style="border-radius: 10px;">	 -->			
						<div class="panel-body " style="margin-bottom: 0">
							<h3 *ngIf="!modify">设备基本信息</h3>
							<h3 *ngIf="modify">编辑设备信息</h3>
							<table class="table" >
								<tr>
									<td>产品名称：</td>
									<td *ngIf="!modify">--</td>
									<td *ngIf="modify">
										<input type="text" name="" [(ngModel)]="product_name"/>
									</td>
								</tr>
								<tr>
									<td>设备编号：</td>
									<td >{{devdata?.locker_device_id}}</td>
								</tr>
								<tr>
									<td>模块编号：</td>
									<td *ngIf="!modify">{{devdata?.locker_device_id}}</td>
									<td *ngIf="modify">
										<input type="text" name="" [(ngModel)]="model_id"/>
									</td>
								</tr>
								<tr>
									<td>生产日期：</td>
									<td>{{devdata?.created_at}}</td>
								</tr>
								<tr>
									<td>上线日期：</td>
									<td>{{devdata?.created_at}}</td>
								</tr>
								<tr>
									<td>GPS经度：</td>
									<td *ngIf="!modify">{{devdata?.locker_address}}</td>
									<td *ngIf="modify">
										<input type="text" name="" [(ngModel)]="gps_jd"/>
									</td>
								</tr>
								<tr>
									<td>GPS纬度：</td>
									<td *ngIf="!modify">{{devdata?.locker_address}}</td>
									<td *ngIf="modify">
										<input type="text" name="" [(ngModel)]="gps_wd"/>
									</td>
								</tr>
								<tr>
									<td>物联卡ID：</td>
									<td *ngIf="!modify">--</td>
									<td *ngIf="modify">
										<input type="text" name="" [(ngModel)]="wlid"/>
									</td>
								</tr>
								<tr>
									<td>剩余流量：</td>
									<td>--</td>									
								</tr>
								<!-- <tr>
									<td>所属渠道商：</td>
									<td *ngIf="!modify">{{devdata?.locker_channel_trader}}</td>
									<td *ngIf="modify">
										<input type="text" name="" class="form-control" [(ngModel)]="locker_channel_trader">
									</td>
								</tr> -->
								<!-- <tr>
									<td>维保人员：</td>
									<td *ngIf="!modify">{{devdata?.locker_maintenance}}</td>
									<td *ngIf="modify">
										<input type="text" name="sd" class="form-control" [(ngModel)]="locker_maintenance">
									</td>
								</tr> -->
				
								<tr>
									<td></td>
									<td *ngIf="!modify">
										<button class="btn btn-info btn-sm btn-rounded" (click)="edit(devdata)">编辑信息</button>
									</td>
									<td *ngIf="modify">
										<button class="btn btn-success btn-sm btn-rounded" (click)="editsave()">保存</button>
										<button class="btn btn-sm btn-rounded" (click)="modify=false;">取消</button>			
									</td>
								</tr>
							</table>
						<!-- </div> -->
					</div>
					<!-- <div style="border:rgb(84,201,244);background-color:rgb(84,201,244);padding: 20px;border-radius: 10px;" >
						<div class="row">
							<div class="col-md-8">
								<div style="border: rgb(147,221,248);background-color: rgb(147,221,248);box-shadow:2px 2px 5px #333333 ;padding: 10px;border-radius: 10px;">
								<div class="m-t m-l">
									<button class="btn btn-idled">A12</button>
								 	<button class="btn ">A12</button>
								 	<button class="btn btn-info">A12</button>
								 	<button class="btn btn-idled">A12</button>
								</div>
								<div class="m-t m-l">
									<button class="btn btn-success">A12</button>
								 	<button class="btn btn-info">A12</button>
								 	<button class="btn btn-idled">A12</button>
								 	<button class="btn btn-danger">A12</button>
								</div>
								<div class="m-t m-l">
									<button class="btn btn-info">A12</button>
								 	<button class="btn btn-success">A12</button>
								 	<button class="btn btn-idled">A12</button>
								 	<button class="btn btn-info">A12</button>
								</div>
								<div class="m-t m-l">
									<button class="btn">A12</button>
								 	<button class="btn btn-info">A12</button>
								 	<button class="btn btn-danger">A12</button>
								 	<button class="btn btn-info">A12</button>
								</div>
								<div class="m-t m-l">
									<button class="btn btn-idled btn-xs">
										空闲
									</button>
									<button class="btn btn-success btn-xs">
										使用中
									</button>
									<button class="btn btn-info btn-xs">
										选定
									</button>
									<button class="btn btn-danger btn-xs">
										故障
									</button>
									<button class="btn btn-xs">
										锁定
									</button>
								</div>
								</div>
							</div>
							<div class="col-md-4">
								<div style="border: rgb(147,221,248);background-color: rgb(147,221,248);box-shadow:2px 2px 5px #333333 ;padding: 15px;border-radius: 10px;">
									<h5 style="color: #fff" class="m-t">管理员操作</h5>
									<div class="m-t">
										<button class="btn btn-operated btn-sm btn-rounded">全部打开</button>																		
									</div>
									<div class="m-t">
										<button class="btn btn-operated btn-sm btn-rounded">全部关闭</button>	
									</div>
									<div class="m-t">
										<button class="btn btn-operated btn-sm btn-rounded">打开A32</button>
									</div>
									<div class="m-t m-b">
										<button class="btn btn-operated btn-sm btn-rounded">锁定/解锁</button>
									</div>
								</div>							
							</div>							
						</div>						
					</div>					
				</div> -->
				</div>


				<div class="col-md-6">
					<div class="panel-body " style="margin-bottom: 0">
							<h3>设备使用信息</h3>
							<table class="table" >
								<tr>
									<td>群组编号：</td>
									<td>--</td>
								</tr>
								<tr>
									<td>群组名称：</td>
									<td >{{devdata?.locker_device_id}}</td>
								</tr>
								<tr>
									<td>群组地址：</td>
									<td >{{devdata?.locker_device_id}}</td>
								</tr>
								<tr>
									<td>启用状态：</td>
									<td>{{devdata?.created_at}}</td>
								</tr>
								<tr>
									<td>所属渠道商：</td>
									<td>{{devdata?.created_at}}</td>
								</tr>
								<tr>
									<td>维保人员：</td>
									<td>{{devdata?.locker_address}}</td>
								</tr>								
				
								
							</table>
						</div>
					</div>
					<!-- <div class="panel panel-default" style="border-radius: 10px;">
						<div class="panel-body" >
							<h3>设备二维码</h3>
							<div style="margin-top: 40px;text-align: center" >
								<img *ngIf="!modify1" src="img/sweeprobot_info.png" style="height:200px;width:200px;">
							</div>
							<div style="margin-top:5px;text-align: center">
								<div class="col-md-3 col-md-offset-4">
									<input type="text" class="form-control" id="file_upload" name="file_upload" type="file" multiple="true"> 
						          <span id="file_uploaded1"></span>
						          <input type="hidden" class="form-control" id="file_uploaded" > 
								</div>						 
							</div>
						</div>
					</div> 
				<!-- </div> -->
			</div>
			<div style="border-top: 2px solid #e5e5e5;"></div>
			<div class="panel-body">
				<div class="row" >
					<div class="col-md-6">
						<div style="font-size: 18px;font-weight: bold;">柜门状态</div>
					</div>
					<div class="col-md-6">
						<div class="pull-right">
							<button class="btn btn-sm btn-orange">全部打开</button>
							<button class="btn btn-sm btn-orange">全部打开</button>
							<!-- <button class="btn btn-sm btn-info" (click)="btype=1;myModal.show()">新增</button> -->
						</div>
					</div>
				</div>
				<table class="table">
					<tr>
						<th>柜门编号</th>
						<th>柜门显示码</th>						
						<th>尺寸类型</th>
						<th>充电类型</th>
						<th>柜门状态</th>
						<th>使用状态</th>
						<th>操作</th>
					</tr>
					<tr *ngFor="let doordata of doordata">
						<td>{{doordata.id}}</td>
						<td>{{doordata.door_name}}</td>						
						<td>
							<span *ngIf="doordata.door_size==0">小</span>
							<span *ngIf="doordata.door_size==1">中</span>
							<span *ngIf="doordata.door_size==2">大</span>
						</td>
						<td>
							<span *ngIf="doordata.door_charge==0">不可充电</span>
							<span *ngIf="doordata.door_charge==1">可充电</span>						
						</td>
						<td>
							<span *ngIf="doordata.door_switch==0" style="background-color: #e5e5e5;padding: 2px;">关闭</span>
							<span *ngIf="doordata.door_switch==1" style="background-color: green;color: #fff;padding: 2px;">打开</span>
						</td>
						<td>
							<span *ngIf="doordata.door_use==0" style="background-color:  #e5e5e5;color: black;padding: 2px;">锁定</span>
							<span *ngIf="doordata.door_use==1" style="background-color:  red;color: #fff;padding: 2px;">故障</span>
							<span *ngIf="doordata.door_use==2" style="background-color:  orange;color: #fff;padding: 2px;">占用</span>
							<span *ngIf="doordata.door_use==3" style="background-color:  green;color: #fff;padding: 2px;">空闲</span>
						</td>
						<td>
							<button class="btn btn-xs btn-info">开门</button>
							<button class="btn btn-xs btn-info">锁定</button>
							<button class="btn btn-xs btn-info">解锁</button>
							<button class="btn btn-xs btn-success" (click)="editdoor(doordata)">编辑</button>
						<!-- 	<button class="btn btn-xs btn-danger" (click)="deldoor(doordata.door_name,doordata.id)">删除</button>	 -->						
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
  </div>
</div>
<!-- </div> -->
<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px">
      <div class="modal-content">
		  <div class="modal-header">
		    <h4 class="modal-title" *ngIf="btype==1">新增柜门</h4>
		    <h4 class="modal-title" *ngIf="btype==2">编辑柜门</h4>
		    <h4 class="modal-title" *ngIf="btype==3">删除柜门</h4>		
		  </div>
		  <div class="modal-body">
		    <form class="form-horizontal" *ngIf="btype==1||btype==2">
		        <div class="form-group row" >
		        	<input type="hidden" name="hd" [(ngModel)]='door_id' >
		          <label class="col-sm-3  control-label" style="text-align: right">柜门显示码</label>
		          <div class="col-sm-7">
		            <input type="text"  class="form-control" placeholder="请输入柜门名称" name="door_name"  [(ngModel)]='door_name' >
		          </div>
		         
		        </div>	       
		        
		    </form>
		    <div *ngIf="btype==3">
		    	<div style="background-color: #e5e5e5;padding: 10px;border-radius: 5px;">
		    		<h4>确定要删除<strong>柜门:{{deldoorname}}</strong>嘛？</h4>
		    	</div>
		    </div>
		  </div>
		  <div class="modal-footer">
		    <button class="btn btn-info confirm-btn" (click)="adddoor()" *ngIf="btype==1">保存</button>
		    <button class="btn btn-success confirm-btn" (click)="editdoorsave()" *ngIf="btype==2">保存</button>
		    <button class="btn  btn-danger" (click)="deldoorsave()" *ngIf="btype==3">确定</button>		  
		    <button class="btn  confirm-btn " (click)="myModal.hide();cancel();">取消</button>
		  </div>
		</div>
     
    </div>
  </div>
</div> 

